import React, { Component } from 'react'
import Icon from 'react-native-vector-icons/FontAwesome5';
import { Alert, View, StyleSheet, Text, TouchableOpacity, FlatList, Image, Dimensions, Animated, } from 'react-native'
import { pxPage } from '../../../common/CommonUtil'
import { throttle, globalColor } from '../../../common/Common'
import { Header } from 'react-native-elements';//可以用来写title
import { TextInput } from 'react-native';
import addFeedback from '../../../redux/actions/Feedback_action';
import { connect } from 'react-redux';

function UselessTextInput(props) {
    return (
        <TextInput
            {...props} // 将父组件传递来的所有props传递给TextInput;
            editable
            maxLength={800}
            placeholder='请提出问题和意见，以便我们提供更好的帮助。'
        />
    );
}

const Feedback = (props) => {
    const [value, onChangeText] = React.useState('');
    return (
        <View style={styles.container}>
            <View>
                <Header
                    backgroundColor='#fea6c4'
                    leftComponent={
                        <TouchableOpacity
                            onPress={throttle(() => {
                                props.navigation.goBack()
                            }, 2000)}>
                            <Icon size={18} name="arrow-left" style={{ color: '#fff', marginTop: pxPage(5) }} />
                        </TouchableOpacity>
                    }
                    centerComponent={
                        <Text style={{ color: '#fff', fontSize: 18, fontWeight: '500' }}>我有一个问题！</Text>
                    }
                />
            </View>
            <Text
                style={{
                    width: '100%',
                    height: pxPage(40),
                    marginLeft: pxPage(15),

                }}>
                <Icon size={10} name="asterisk" style={{ color: 'red' }} />
                <Text style={{ fontSize: 16, color: '#000', lineHeight: pxPage(40) }}> 反馈内容</Text>
            </Text>

            <UselessTextInput
                style={{
                    borderWidth: 1,
                    borderColor: '#ccc',
                    marginLeft: '5%',
                    height: pxPage(400),
                    width: '90%',
                    backgroundColor: '#fff',
                    textAlignVertical: 'top',
                    borderRadius: 5
                }}
                multiline
                numberOfLines={40}
                onChangeText={text => onChangeText(text)}
                value={value}
            />

            <Text style={{ marginLeft: pxPage(315), marginTop: -pxPage(30), marginBottom: pxPage(40), color: '#aaa' }}>{value.length}/800字</Text>

            <TouchableOpacity
                style={{ backgroundColor: '#fea6c4', width: '60%', height: pxPage(50), marginLeft: '20%' }}
                onPress={() => {
                    console.log(value)
                    if (value == '') {
                        Alert.alert('请输入反馈内容！')
                    } else {
                        props.dispatch(addFeedback(props.login.data.user_id, value))
                        Alert.alert('已提交！')
                        onChangeText('')
                    }
                }}
            >
                <Text style={{ textAlign: 'center', fontSize: 18, lineHeight: pxPage(50), color: '#fff' }}>提交反馈</Text>
            </TouchableOpacity>

        </View>
    )
}

const mapStateToProps = state => {
    return {
        login: state.login
    }
}

export default connect(mapStateToProps)(Feedback)

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'rgb(240,240,240)',
    }
})